<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的常见指令</title>
</head>

<body>
    <div id="标签">
        <!-- 标签 -->
        <div>{{divMsg}}</div>

        <!-- (1) v-html -->
        <!-- 将文本按html解析 -->
        <div v-html="divMsg">{{divMsg}}</div>

        <!-- (2) v-text -->
        <!-- 按文本值解析 -->
        <div v-text="divMsg">{{divMsg}}</div>

        <!-- (3) v-bind -->
        <!-- 为标签绑定属性值 -->
        <!-- 完整写法
    <标签名 v-bind:属性名="data中key"></标签名> -->
        <!-- 插值表达式不能写在属性中 -->
        <!-- file:///F:/WebLearn/Vue_Day01/%7B%7Burl%7D%7D -->
        <!-- <a href="{{url}}">百度一下</a><br>  -->

        <a v-bind:href="url">百度一下</a><br>

        <!-- 简写：常用 *****
        <标签名 :属性名="data中key"></标签名> -->
        <a :href="url">百度一下</a><br>

        <!-- (4)条件渲染 v-if && v-else -->
        <!-- <标签名 v-if="条件表达式">满足条件显示的内容</标签名>
        <标签名 v-else-if="条件表达式">满足条件显示的内容</标签名>
        .......
        <标签名 v-else>上述条件都不满足执行的内容</标签名> -->
        <div v-if="3 == 3">true</div>
        <div v-if="3 == 0">false,判断不显示</div>

        <!-- (5)条件渲染 v-show -->
        <div v-show="divMsg">{{divMsg}}</div>
        <div v-show="divMsg">{{divMsg}}</div>
        <div v-show="flag">{{divMsg}}</div>

        <!--
           v-if  v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
           v-if 如果条件为false，页面中根本没有这个元素
           v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
        -->

        <!-- (6)列表渲染 v-for -->
        <!-- <标签名 v-for="(x,index) in 数组或者对象名"> -->
        <div v-for="(x,index) in arr">元素:{{x}},索引:{{index}}</div>

        <!-- (7)事件绑定 v-on -->
        <button v-on:click="print()">print</button>
        <!-- <标签名 v-on:事件名="调用的是vue中的js函数"></标签名>
        简写：掌握 -->
        <button @click="print()">print</button>
        <!-- <标签名 @事件名="调用的是vue中的js函数"></标签名>
        说明：
        1.在vue中绑定的事件名都是将原生js的事件名去掉on 例如:click  blur... -->
        <button onclick="ve.print()">print</button><br>

        <!-- (8)表单绑定 v-model -->
        <!-- 双向绑定 -->
        <!-- 1）vue中的data数据更改，然后视图中的显示内容也会随着改变
        2）视图中的内容改变，vue中的data数据也会随着改变 -->
        <input type="text" name="username" v-model="username"><br>
        <div>双向绑定数据实时更新:{{username}}</div>

        <!-- 单向绑定 :value -->
        <!-- vue中的data数据更改，然后视图中的显示内容也会随着改变 -->
         <input type="text" name="username" :value="username">
        <div>单向绑定数据不随前台更新:{{username}}</div>
    </div>

    <p></p>
    <script src="../vue/vue.js"></script>
    <script>
        //在vue中指令是作用在视图中的即html标签，可以在视图中增加一些指令来设置html标签的某些属性和文本。
        //使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
        let ve = new Vue({
            el: "#标签",

            data: {
                divMsg: "<b>加粗的字</b>",
                url: "https://www.baidu.com",
                flag: false,
                username: "张三",
                arr: [1, 2, 3, 4, 5, 6]
            },

            methods: {
                print() {
                    console.log("hello")
                }
            }
        })

        let print1 = () => {
            console.log("hello 1")
        }
    </script>
</body>

</html>